﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="scmsByAspdNet.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="static/bootstrap-4.6.0/css/bootstrap.css" />
    <link rel="stylesheet" href="static/css/Default.css" />
    <script src="static/js/jquery-3.6.0.js"></script>
    <script src="static/js/jquery-3.6.0.min.js"></script>

    <title>学生选课系统-访问页</title>
</head>
<body>
    <div class="main-warp">
        <%-- 导航栏 --%>
        <div class="nav-warp">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <a class="navbar-brand" href="Default.aspx">学生选课系统</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="Login.aspx">登录 <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">注册</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">更多功能
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">相关信息</a>
                                <a class="dropdown-item" href="#">关于我们</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">版本有关</a>
                            </div>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="没有任何功能" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                    </form>
                </div>
            </nav>
        </div>
        <%-- 轮播 --%>
        <div class="carousel-warp">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="static/img/hubu1.jpg" class="d-block w-100" alt="..." />
                    </div>
                    <div class="carousel-item">
                        <img src="static/img/hubu2.jpg" class="d-block w-100" alt="..." />
                    </div>
                    <div class="carousel-item">
                        <img src="static/img/hubu3.jpg" class="d-block w-100" alt="..." />
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </button>
            </div>
        </div>
        <%-- 介绍信息 --%>
        <div class="info-first-warp">
            <div class="jumbotron">
                <h1 class="display-4">嗨！这里是欢迎界面</h1>
                <p class="lead">这里是学生课程管理系统，学生可以选课，退课，教师可以给学生的课程打分，拥有一部分的小功能</p>
                <hr class="my-4">
                <p>如果你还没有登录的话，点击下方按钮登录</p>
                <a class="btn btn-primary btn-lg" href="Login.aspx" role="button">戳我</a>
            </div>
        </div>
        <%-- 新闻界面 --%>
        <div class="news_warp" style="width: 1200px; margin: 0px auto;">
            <div class="media mt-3">
                <img src="static/img/hubu1.jpg" class="mr-3" alt="..." style="width: 64px; height: 64px;" />
                <div class="media-body">
                    <h5 class="mt-0">这是一个新闻例子</h5>
                    <p>看到这个新闻没，很棒的</p>
                    <p>这是第二行</p>
                </div>
            </div>

            <div class="media mt-3">
                <img src="static/img/hubu2.jpg" class="mr-3" alt="..." style="width: 64px; height: 64px;" />
                <div class="media-body">
                    <h5 class="mt-0">一个比较好的新闻就是这样</h5>
                    <p>你有什么想要思考的吗？</p>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="static/bootstrap-4.6.0/js/bootstrap.js"></script>
<script>
    init_news_warp();
    //初始化新闻板块
    function init_news_warp() {
        $.post("cotro/admin/getNews.ashx", {},
            function (res, status) {
                if (status == "success") {
                    res = JSON.parse(res);
                    console.log(res);
                    all_news = res.rows;
                    news_warp = document.getElementsByClassName("news_warp")[0];
                    for (let i = 0; i < all_news.length; ++i) {
                        if (all_news[i].is_open == 0) continue;
                        news_warp.innerHTML += init_media_box(all_news[i]);
                    }
                }
            })
    }

    function init_media_box(news) {
        return `<div class="media mt-3">
                <img src="static/img/${news.img_name}" class="mr-3" alt="..." style="width: 64px; height: 64px;" />
                <div class="media-body">
                    <h5 class="mt-0">${news.title}</h5>
                    ${news.detail}
                </div>
            </div>`
    }
</script>
</html>
